<!--
 * @Author: sunli
 * @Date: 2024-02-20 09:47:59
 * @LastEditors: sunli
 * @LastEditTime: 2024-02-28 14:47:19
 * @FilePath: /debug/src/views/login/register.vue
 * @Description: 
-->
<template>
<div class="bg"></div>
	<div class="register">
		<p>欢迎注册</p>
		<div class="main">
			<el-input class="input" v-model="userName" placeholder="用户名" />
			<el-input class="input" v-model="mobile" placeholder="手机号码" />
			<el-input class="input" v-model="email" placeholder="电子邮箱" />
			<el-input class="input" v-model="pwd" type="password" show-password placeholder="用户密码" />
			<el-button class="submit" type="primary" @click="submit">注 册</el-button>
		</div>
		<div class="tip">
			<el-link type="primary" :underline="false" @click="router.push('/login')">返回登录</el-link>
		</div>
	</div>
</template>
  
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import httpReq from '@/request'

import useStore from '@/store/index'

const store = useStore()
const router = useRouter()

const userName = ref()
const mobile = ref()
const email = ref()
const pwd = ref()


const submit = async() => {
	const params = {
		userName: userName.value,
		mobile: mobile.value,
		email: email.value,
		password: pwd.value
	}
	const res = await httpReq.post('http://localhost:8092/register', params)

	store.commit_userVO(res)
	router.push('/')
}
</script>

<style lang="scss" scoped>
.bg {
	position: fixed;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #001f3f, #0088a9, #00c9a7, #92d5c6, #ebf5ee);
}
.register {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 30px;
	box-shadow: 1px 1px 10px #999;
	border-radius: 5px;
	background-color: #fff;
	p {
		margin-bottom: 20px;
		font-size: 26px;
		font-weight: bold;
	}
	.tip {
		text-align: right;
		margin-top: 5px;
	}
	.main {
		width: 400px;
		.input {
			margin-bottom: 10px;
			height: 40px;
		}
		.submit {
			margin-top: 20px;
			width: 100%;
			height: 40px;
		}
	}
}
</style>
  